<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" session="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
    Integer pageA = "".equals(request.getParameter("page")) || request.getParameter("page")==null ? 1 : Integer.parseInt(request.getParameter("page"));
    request.setAttribute("pageA",pageA);
    String tag = request.getParameter("tag");
    request.setAttribute("tag",tag);
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>资源链-管理后台</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <style type="text/css">*{margin:0; padding:0;} body{overflow-x: hidden;}</style>
    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        function actionSearch(page){
            var searchTag = document.getElementById("searchTag").value.trim();
            window.location.href = "/joinadmin/${userId}/userDetails?tagName="+searchTag+"";
        };
    </script>
</head>
<body>

<div class="row" style="padding:30px;">
    <div class="col-md-12" style="text-align: right;">
        <a href="/joinadmin/logout">退出管理后台</a>
    </div>

    <div class="col-md-8">
        <h2>用户ID${userId}：-详情(<i>${totalScore}分</i>)</h2>

        <div class="form-inline" style="padding-bottom: 10px;">
            <input type="email" class="form-control" id="searchTag" placeholder="请输入需搜索Tag">
            <button type="submit" class="btn btn-success" onclick="actionSearch()">搜索</button>
        </div>
        <table class="table table-bordered">
            <tr>
                <th>用户ID</th>
                <th>用户昵称</th>
                <th>手机号</th>
                <th>头像</th>
                <th>性别</th>
                <th>国家</th>
                <th>省份</th>
                <th>城市</th>
                <th>语言</th>
                <th>openId</th>
                <th>unionId</th>
                <th>个人介绍</th>
                <th>创建时间</th>
                <th>关系用户id</th>
                <th>标签内容列表数组</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${userDetailsList}" var="newList" varStatus="status">
                <tr>
                    <td>${newList.id}</td>
                    <td>${newList.nickname}</td>
                    <td>${newList.phone}</td>
                    <td>${newList.avatarurl}</td>
                    <td>${newList.gender}</td>
                    <td>${newList.country}</td>
                    <td>${newList.province}</td>
                    <td>${newList.city}</td>
                    <td>${newList.language}</td>
                    <td>${newList.openid}</td>
                    <td>${newList.unionid}</td>
                    <td>${newList.synopsis}</td>
                    <td>${newList.createtime}</td>
                    <td>${newList.contactsid}</td>
                    <td class="table_tags">${newList.tags}</td>
                    <td><b class="openTag" data-list="1" data-userid="${newList.id}" data-index="${status.index}" style="color:#f00;">添加标签</b></td>
                </tr>
                <tr>
                    <td colspan="15">
                        <table class="table table-bordered">
                            <tr>
                                <th>用户ID（二级）</th>
                                <th>用户昵称</th>
                                <th>手机号</th>
                                <th>头像</th>
                                <th>性别</th>
                                <th>国家</th>
                                <th>省份</th>
                                <th>城市</th>
                                <th>语言</th>
                                <th>openId</th>
                                <th>unionId</th>
                                <th>个人介绍</th>
                                <th>创建时间</th>
                                <th>关系用户id</th>
                                <th>标签内容列表数组</th>
                                <th>操作</th>
                            </tr>
                                    <c:forEach items="${newList.contacts_relation_user}" var="newListA" varStatus="statusA">
                                        <tr>
                                            <td>${newListA.id}</td>
                                            <td>${newListA.nickname}</td>
                                            <td>${newListA.phone}</td>
                                            <td>${newListA.avatarurl}</td>
                                            <td>${newListA.gender}</td>
                                            <td>${newListA.country}</td>
                                            <td>${newListA.province}</td>
                                            <td>${newListA.city}</td>
                                            <td>${newListA.language}</td>
                                            <td>${newListA.openid}</td>
                                            <td>${newListA.unionid}</td>
                                            <td>${newListA.synopsis}</td>
                                            <td>${newListA.createtime}</td>
                                            <td>${newListA.contactsid}</td>
                                            <td class="table_tags">${newListA.tags}</td>
                                            <td><b class="openTag" data-list="2" data-userid="${newListA.id}" data-index="${statusA.index}" style="color:#f00;">添加标签</b></td>
                                        </tr>
                                    </c:forEach>
                        </table>
                    </td>
                </tr>
            </c:forEach>
        </table>

    </div>

</div>


<style type="text/css">
    .tanchuang { position:fixed; top:0; left:0; z-index:9; display:none; width:100%; height:100%; background:rgba(0,0,0,.6); justify-content: center; align-items: center; overflow:hidden; }
    .tanchuang .tanchuang_con { width: 600px; height: auto; padding: 30px; background-color: #fff; }
    .tanchuang .tanchuang_con h6 { display:block; width:100%; height:auto; text-align: right; cursor:pointer; overflow:hidden; }
    .tanchuang .tanchuang_con dl { display:block; width:100%; height:auto; padding:10px; box-sizing:border-box; background-color:#f2f2f2; overflow:hidden; }
    .tanchuang .tanchuang_con dl dt { display:inline-block; float:left; width:100%; line-height: 1.6; overflow:hidden; }
    .tanchuang .tanchuang_con dl dd { display:inline-block; float:left; width:100%; margin-top:10px; line-height:1.4; overflow:hidden; }
    .tanchuang .tanchuang_con dl dd p { display:inline-block; float:left; width:100%; font-size:14px; color:#000000; overflow:hidden; }
    .tanchuang .tanchuang_con dl dd p i { display:inline-block; float:right; text-align: right; cursor:pointer; color:#f00; overflow:hidden; }

    .openTag { cursor:pointer; }

</style>
<div id="tanchuang" class="tanchuang" data-list="" data-userid="" data-index="">
    <div class="tanchuang_con">
        <h6>关闭窗口</h6>
        <dl>
            <dt>我的标签：</dt>
            <dd>
                <p><b>标签1</b><i data-tagid="1">DELETE</i></p>
                <p><b>标签2</b><i data-tagid="1">DELETE</i></p>
            </dd>
        </dl>
        <input type="text" placeholder="输入需增加的标签" id="tagInput"/>
        <button>新增标签</button>
    </div>
</div>
<script type="text/javascript">
    $(function(){


        //获取当前用户绑定 所以标签
        $(".table .openTag").on("click",function(){
            $("#tanchuang").css("display","flex");
            $("#tanchuang").attr("data-id",$(this).attr("data-userid"));
            $("#tanchuang").attr("data-index",$(this).attr("data-index"));
            $("#tanchuang").attr("data-list",$(this).attr("data-list"));
            $("#tagInput").val("");

            $(".table .active").removeClass("active");
            $(this).parent().siblings("td.table_tags").addClass("active");

            $.ajax({
                type: 'get',
                url:"/joinadmin/"+$(this).attr("data-userid")+"/tablist",
                data:"",
                success:function(res){
                    if(res.data.length > 0){
                        var html = '';
                        for(var i=0; i<res.data.length; i++){
                            html += '<p><b>'+res.data[i].tagname+'</b><i data-userid="'+res.data[i].id+'" data-tagid="'+res.data[i].tagid+'">DELETE</i></p>';
                        }
                        $(".tanchuang .tanchuang_con dl dd").html(html);

                    }else{
                        $(".tanchuang .tanchuang_con dl dd").html("");
                    }
                },
                error:function(err){
                    alert("请求服务出错");
                }
            });

        });

        //新增标签
        $(".tanchuang .tanchuang_con button").on("click",function(){
            var inputTag = $("#tagInput").val().trim();
            var tabelIndex = $("#tanchuang").attr("data-index");
            if(inputTag != ""){
                $.ajax({
                    type: 'POST',
                    url:"/joinadmin/"+$("#tanchuang").attr("data-id")+"/setTab",
                    data:{"tagname":inputTag},
                    success:function(res){
                        if(res.code == "200"){
                            var html = '';
                            var tagArr = [];
                            for(var i=0; i<res.data.length; i++){
                                tagArr.push(res.data[i].tagname);
                                html += '<p><b>'+res.data[i].tagname+'</b><i data-userid="'+res.data[i].id+'" data-tagid="'+res.data[i].tagid+'">DELETE</i></p>';
                            }
                            $(".tanchuang .tanchuang_con dl dd").html(html);
                            // console.log(tabelIndex);
                            // console.log($(".table .table_tags").length);
                            $(".table .active").text(tagArr.splice(","));

                            $("#tagInput").val("");
                            alert("新增标签成功");

                        }else{
                            alert(res.message);
                        }
                    },
                    error:function(err){
                        alert("请求服务出错");
                    }
                });
            }
        });

        //删除标签
        $(document).on("click",".tanchuang .tanchuang_con dl dd p i", function(){
            var userId = $(this).attr("data-userid");
            var tagId = $(this).attr("data-tagid");
            var tabelIndex = $("#tanchuang").attr("data-index");
            var tabelState = $("#tanchuang").attr("data-list");

            $.ajax({
                type: 'POST',
                url:"/joinadmin/"+userId+"/deleteTag",
                data:{"tagId":tagId},
                success:function(res){
                    if(res.code == "200"){
                        var html = '';
                        var tagArr = [];
                        for(var i=0; i<res.data.length; i++){
                            tagArr.push(res.data[i].tagname);
                            html += '<p><b>'+res.data[i].tagname+'</b><i data-userid="'+res.data[i].id+'" data-tagid="'+res.data[i].tagid+'">DELETE</i></p>';
                        }
                        $(".tanchuang .tanchuang_con dl dd").html(html);
                        $(".table .active").text(tagArr.splice(","));
                        alert("删除标签成功");

                    }else{
                        alert(res.message);
                    }
                },
                error:function(err){
                    alert("请求服务出错");
                }
            });
        });

        //关闭弹窗（添加标签 Input框）
        $(".tanchuang .tanchuang_con h6").on("click",function(){
            $("#tanchuang").fadeOut();
        });

    });
</script>


</body>
</html>
